<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8"  />
	<title>投稿中心</title>
	<!-- Include stylesheet -->
	<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
	<link rel="stylesheet" th:href="@{/css/FuWenBeng.css}">
	<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
	<link rel="stylesheet" th:href="@{/css/BVideo.css}" />
	<style>

	</style>
</head>
<body>
	<div class="container-fluid bmTopDiv">
		<div class="col-md-1 bmTopLogoFont">
			<h3>BhSyVideo</h3>
		</div>
		<div class="col-md-2 bmTopXxDiv">
			<ul class="">
				<li class="bmToplif"><a style="text-decoration: none;color: white" th:href="@{/bhsy/theMain}"> 首页</a></li>
			</ul>
		</div>
	</div>

	<input type="text" id="bUserId" th:value="${bUserId}" style="display: none">
	<div class="Upload_topDiv"></div>
	<div class="left_xzDiv">
		<ul class="leftXz_Ul">
			<li style="background-color:#fb7299;color: white ">视频投稿</li>
			<li>专栏投稿</li>
			<li>近期阅览</li>
			<li th:value="${Gos}" th:if="${Gos==0}">申请商家</li>
			<li th:value="${Gos}" th:if="${Gos==1}">申请中</li>
			<li th:value="${Gos}" th:if="${Gos==2}">发布商品</li>
			<li>修改信息</li>
		</ul>
	</div>

	<div class="right_zlDiv" style="display: block">
		<img class="uploadImg" th:src="@{/images/uploadImg.png}">
		<input id="InpfileVideo" type="file" style="display: none">
		<input class="subBtn" type="submit" style="display: none">
		<input id="upVideoBtn" type="button" value="上传视频">
	</div>
	<div id="zlScroll" class="right_zlDiv">
		<input id="inpZlTopFont" type="text" placeholder="输入标题">
		<!-- Create the editor container -->
		<div id="editor" style="font-size: 18px">

		</div>
		<select name="videoTagOne" class="videoTag">
			<option>鬼畜</option>
			<option>游戏</option>
			<option>生活</option>
			<option>动画</option>
			<option>舞蹈</option>
			<option>音乐</option>
		</select>
		<div class="zlTagDiv">

		</div>
		<input class="inpTagText" placeholder="追加标签--以,分割" type="text">
		<button id="isover">完成</button>
	</div>
	<div class="right_zlDiv">

		<div id="main" style="width: 1000px;height: 800px;"></div>
<!--		<input type="button" value="近期阅览">-->

	</div>
	<div class="right_zlDiv" th:if="${Gos==0}">
		<input id="sqGonSBtn" class="shenqingBtn" type="button" value="申请商家">
	</div>
	<div class="right_zlDiv" th:if="${Gos==1}">
		<input class="shenqingBtn" style="background-color: #959595;" disabled type="button" value="申请中">
	</div>
	<div class="right_zlDiv" th:if="${Gos==2}">
		<input type="text" class="UpShopName" placeholder="商品名称">
		<hr class="shopHr" style="border: 1px dashed #e3e3e3">
		<input type="text" class="UpShopMoney" placeholder="商品价格">
		<div class="UpShopImgAll">
			<div class="shopImg" style="">
<!--				<input type="image" th:src="@{/images/HImgAll/qx1.png}" style="float: right">-->
			</div>
		</div>
		<input id="fileupload" type="file" name="file" style="display: none">
		<input class="UpLoadShopImgBtn" type="button" value="上传商品图片">
		<input type="text" class="shopCount" placeholder="商品数量">
		<input type="datetime-local" id="startTime" class="form-control">
		<input type="datetime-local" id="endTime" class="form-control">
		<input class="shenqingBtn" type="button" value="发布商品">
	</div>
	<div class="right_zlDiv">
		<img class="zhiBoImg" th:src="@{/images/HImgAll/ZhiBo.png}">
		<input class="zhiBoBtn" type="button" th:value="B站直播">
	</div>


</body>
<!-- Include the Quill library -->

   	<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script th:src="@{/js/jquery-360.min.js}"></script>
	<script th:src="@{/js/jquery.ui.widget.js}"></script>
	<script th:src="@{/js/jquery.fileupload.js}"></script>
	<script th:src="@{/js/jquery.iframe-transport.js}"></script>
	<script th:src="@{/js/Quill.js}"></script>
	<script th:src="@{/js/FuWenBeng.js}"></script>
	<script th:src="@{/js/echarts.js}"></script>
	<script th:src="@{/js/echartsReading.js}"></script>
   <!-- Initialize Quill editor -->
   <script>
	   var kk;
	   var u8File;
	   var imgPath;
	   $(function(){

	   		$("#zlScroll").scroll(function (){
	   			if ($("#zlScroll").scrollTop()>=111){
	   				$(".ql-toolbar").css("width","63.2%").css("margin-top","0%").css("margin-left","8%").css("position","fixed").css("z-index","2").css("background-color","whitesmoke").css("transition","0.5s");
				}else {
					$(".ql-toolbar").css("width","80%").css("margin-left","10%").css("position","").css("background-color","rgba(0,0,0,0)").css("transition","1s").css("float","left");
				}
			})

		   $("#isover").click(function(){
			   var fordata = new FormData();
			   var sName = $("#inpZlTopFont").val();
			   fordata.append("sName",sName);
			   var zlTag = "";
			   if ($(".inpTagText").val()==""){
				   zlTag=$(".videoTag").val();
			   }else {
				   zlTag=$(".videoTag").val()+","+$(".inpTagText").val();
			   }
			   fordata.append("zlTag",zlTag);
			   var qleditor = document.getElementsByClassName("ql-editor");
			   var fimg = qleditor[0].querySelectorAll("img");
			   console.log(fimg.length)
			   if (fimg.length!=0){
				   //多文件上传
				   for (let i = 0; i < fimg.length ; i++) {
					   console.log(dataURLtoFile(fimg[i].src,i+"Img.png"))
					   fordata.append("file",dataURLtoFile(fimg[i].src,i+"Img.png"));
					   fimg[i].src="";
				   }
			   }else {
				   fordata.append("file","")
			   }
			   kk=$(".ql-editor").html();
			   fordata.append("hm",kk);
			   $.ajax({
				   url: "/zl/contents",
				   type:"post",
				   processData: false, // 不处理数据
				   contentType: false, // 不设置内容类型
				   data:fordata,
				   success: function (data){
					   location.reload()
				   }
			   })
		   })
		   var leftXz_Ul = document.getElementsByClassName("leftXz_Ul")[0];
		   var leftXz_li = leftXz_Ul.querySelectorAll("li");
		   //商家区域被点击时
		   $(".shenqingBtn").click(function () {
			   if(leftXz_li[3].value==0){
				   $.ajax({
					   url:"/Gos/sq/"+$("#bUserId").val(),
					   type:"post",
					   success:function () {
						   location.reload();
					   }
				   })
			   }else if (leftXz_li[3].value==2){

				var sName = $(".UpShopName").val();
				var sMoney = $(".UpShopMoney").val();
				var sImg = imgPath;
				var sCount = $(".shopCount").val();
				var startDate = $("#startTime").val();
				var endDate = $("#endTime").val();
			    var formDate = new FormData();
			    console.log(sName);
				formDate.append("sName",sName);
				formDate.append("sMoney",sMoney);
				formDate.append("sImg",sImg);
				formDate.append("sCount",sCount);
				formDate.append("startDate",new Date(startDate));
				formDate.append("endDate",new Date(endDate));
				$.ajax({
					url:"/uploadShop",
					method: "post",
					processData: false, // 不处理数据
					contentType: false, // 不设置内容类型
					data:formDate,
					success:function (data) {
						window.location.reload();
						console.log(data);
					}
				})
			   }
		   })
		   $(".UpLoadShopImgBtn").click(function () {
			   $("#fileupload").click();
		   })
		   //上传商品图片进行判断图片尺寸
		   //上传商品图片
		   $("#fileupload").fileupload({
			   url: "/goods/uploadImg",
			   dataType: 'json',
			   formData: {},
			   add: function(e, data) {

				   if (!(window.File || window.FileReader|| window.FileList || window.Blob)) {
					   alert('您的浏览器暂不支持图片预览');
					   return;
				   }

				   //读取图片数据
				   var f = data.originalFiles[0];
				   var reader = new FileReader();
				   reader.onload = function(e) {
					   var datas = e.target.result;
					   //获取图片真实宽度和高度
					   var image = new Image();
					   image.onload = function() {
						   var width = image.width;//图片宽
						   var height = image.height;//图片高
						   var bfb = width/height*100;
						   if (bfb>85||bfb<70) {
							   alert("请上传宽300px、高415px的图片，当前图片宽度" + width + "px,高度" + height + "px");
							   return;
						   }
						   data.submit();
					   };
					   image.src = datas;
				   };
				   reader.readAsDataURL(f);




			   },
			   done: function (e, data) {
			   	console.log(data)
				   //上传完成
				   //获取图片上传的路径
				   imgPath = data.result.map.shopImgPath;
				   $(".shopImg").css("background-image","url("+imgPath+")");
			   },
		   });

		   $(".zhiBoBtn").click(function () {
			   alert(" 请使用以下参数作为直播通道:\n 连接BhSy服务器地址:rtmp://192.168.132.111/live \n 串流秘钥:livestream_"+$("#bUserId").val()+"\n 将以上两个参数填入你选择的直播软件");
			   $.ajax({
				   url:"/zl/zhiBo",
				   type:"post",
				   success:function (data) {

				   }
			   })
		   })
		})

	   $("#upVideoBtn").click(function () {
		   $("#InpfileVideo").click();
	   })
	   $("#InpfileVideo").change(function () {
		   $(".subBtn").click();
	   })
	   function StringToDate(str)
	   {
// 转换日期格式

		   str = str.replace('-', '/' );  // "2010/08/01";

// 创建日期对象

		   var  date =  new  Date(str);

// 加一天

		   date.setDate(date.getDate() + 1);

		   return date;

	   }

   </script>
</html>
